<template>
    <a-form-item
        class="m-0 pt-2 pb-2 pl-2 pr-2"
        @click="selectWidget"
        :name="props.widget.options.name"
        :rules="state.rules"
    >
        <template #label>
            <a-tooltip :title="props.widget.options.label">
                <span class="form-label" @click.stop>
                    {{ props.widget.options.label }}
                </span>
            </a-tooltip>
        </template>
        <slot/>
    </a-form-item>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';
import type { BaseWidgetType, DesignerType } from '../type';
import { useRules } from '../hooks/useRules';

const props = withDefaults(defineProps<{
    widget:BaseWidgetType,
    designer:DesignerType
}>(),{})

const state = reactive({
    rules:[]
})

useRules(props.widget,state)

watch(()=>props.widget.options.requiredHint,(val)=>{
    state.rules[0].message = val
})

watch(
    ()=>state.rules,
    ()=>{
        props.widget.options.rules = state.rules
    },
    {
        deep:true,
    }
)

// 选中当前组件
const selectWidget = ()=>{
    props.designer.selectCurWidget(props.widget)
}
</script>

<style lang='scss' scoped>
:deep(.ant-form-item){
    label{
        width:100%;
    }
}
.form-label {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
